import React, { Component } from 'react';
import '../Public/iconfont.css'
import nearStyle from './home_near.module.scss'
import './home_near.module.scss'
import axios from '../../http/axios'
import store from '../../redux/store/index'
import { connect } from "react-redux";
import {searchNearShop} from '../../redux/actionCreators/home_action/index'


// let latitude=22.55371;
// let longitude=113.88311;
class home_near extends Component {
    
    //var arr=[]
    componentDidMount(){
      store.dispatch(searchNearShop(22.55371,113.88311))
    }
    render() {
        return (
            <div className={nearStyle.homeNear}>
                <div className={nearStyle.nearTitle}>
                    <i className="iconfont  icon-elemo-waimai-canyin"></i>
                    <span className={nearStyle.nearTitleName}>附近商家</span>
                </div>
                {
                    this.props.nearshop &&  this.props.nearshop.map((item,index)=>{
                        return (
                            <div className={nearStyle.nearShop} key={index}>
                            <div className={nearStyle.nearShopItem}>
                                <div className={nearStyle.shopItemLeft}>
                                    <img src={"http://elm.cangdu.org/img/"+item.image_path} alt="" />
                                </div>
                                <div className={nearStyle.shopItemRight}>
                                    <div className={nearStyle.itemRightHeader}>
                                        <h4 className={nearStyle.itemHeaderDetail}>
                                            <span className={nearStyle.headerDetailPremium}>品牌</span>
                                            <span className= {nearStyle.headerDetailName}>{item.name}</span>
                                        </h4>
                                        <ul className={nearStyle.headerDetailUl}>
                                            {
                                                item.supports.map((i,key)=>{
                                                    return (
                                                        <li className={nearStyle.supports} key={key}>{i.icon_name}</li>
                                                    )
                                                    
                                                })
                                            }
                                            {/* <li className={nearStyle.supports}>{item.[0].icon.name}</li>
                                            <li className={nearStyle.supports}>{item.supports[1].icon.name}</li> */}
                                            {/* <li className={nearStyle.supports}>{item.supports[2].icon.name}</li> */}
                                        </ul>
                                    </div>
                                    {/* 星级 */}
                                    <div className={nearStyle.shopOrderNum}>
                                        <h5 className={nearStyle.orderNumLeft}>
                                            <div className={nearStyle.ratingSection}>
                                                <div className={nearStyle.ratingContainer}>
                                                    <ul className={nearStyle.starContainer}>
                                                        <li className={nearStyle.greyFill}>*****</li>
                                                    </ul>
                                                  <div className={nearStyle.ratingNum}>
                                                      <span>{item.rating}</span>
                                                  </div>
                                                </div>
                                                <div className={nearStyle.orderSection}>
                                                    <span>月售{item.recent_order_num}单</span>
                                                </div>
                                            </div>  
                                        </h5>
                                        <div className={nearStyle.orderNumRight}>
                                            <div className={nearStyle.numRight}>
                                                <span className={nearStyle.deliveryLeft}>{item.delivery_mode.text}</span>
                                                <span className={nearStyle.deliveryRight}>准时达</span>
                                            </div>
                                        </div>
        
                                    </div>
                                    {/* 起送费 */}
                                   <div className={nearStyle.feeDistance}>
                                       <div className={nearStyle.fee}>
                                           <span>￥{item.float_minimum_order_amount}起送</span>
                                           <span> / </span>
                                           <span>{item.piecewise_agent_fee.tips}</span>
                                       </div>
                                       <div className={nearStyle.distance}>
                                           <span className={nearStyle.km}>{item.distance}</span>
                                           <span className={nearStyle.fen}> / </span>
                                           <span className={nearStyle.time}>{item.order_lead_time}</span>
                                       </div>
                                   </div>
                                </div>
                            </div>
                        </div>
        

                        )
                    })
                }
               
            </div>
        );
    }
}


export default connect((state) => {
   console.log(state);
    return {
        nearshop:state.homeReducer.nearshop,
        // groupcity: state.homeReducer.groupcity,
        // hotcity: state.homeReducer.hotcity,
        // locatcity: state.homeReducer.locatcity,
        // idcity:state.homeReducer.idcity
    }
}, null)(home_near);